import React from "react";
import "../CSS/sidebar.css";
import ImageIconTag from './NodeIcon'

export default function TheAddNodeSidebar({ onMaterialSelect, materials, showSidebar }) {
  return (
    <div hidden={showSidebar} className="totalContainerSidebar">
      <div className="titleStyleSidebar">Attach node</div>
      <div className="subContainerSidebar">
        {materials.map((material) => (
          <div
            key={material}
            className="listStyle"
            onClick={() => onMaterialSelect(material)}
          >
            <ImageIconTag type={material} size="s"/>
            {material}
          </div>
        ))}
      </div>
    </div>
  );
}
